<template>
    <div class="bg">
        <div class="login-container">
            <div class="login-box">
                <div class="login-title">欢迎注册</div>
                <div class="login-form">
                    <el-form :model="user">
                        <el-form-item>
                            <el-input v-model="user.name" prefix-icon="el-icon-user" style="width: 80%"
                                      placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="user.password" prefix-icon="el-icon-lock" style="width: 80%" placeholder="请输入密码"
                                      show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <template>
                                <el-select v-model="radio" placeholder="请选择" style="width: 80%">
                                    <el-option value="用户"></el-option>
                                    <el-option value="员工"></el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="width: 80%; margin-top: 10px" type="info" @click="register()">注册</el-button>
                            <div class="zc">已有账号？<a href="/adminLogin" target="_blank" style="text-decoration: none;color: #5fafd7">去登录</a></div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";

export default {
    name: 'RegisterView',
    data() {
        return {
            radio: '',
            user: {}
        };
    },
    methods: {
        register() {
            if (this.radio === "用户") {
                /*用户登录*/
                request.post('/user/register', this.user).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: '注册成功',
                            type: 'success'
                        });
                        this.$router.push('/adminLogin');
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });

            }
            if (this.radio === "员工") {
                request.post('/employee/register',this.user).then(res=>{
                    if (res.code === '0') {
                        this.$message({
                            message: '注册成功',
                            type: 'success'
                        });
                        this.$router.push('/adminLogin')
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }
        }
    }
};
</script>

<style scoped>
.bg {
    background-image: url('../assets/images/sleepdog.jpg');
    background-size: cover;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-box {
    width: 400px;
    height: 370px;
    margin: 150px auto;
    background-color: rgba(134, 150, 167, 0.5);
    border-radius: 10px;
}

.login-title {
    width: 100%;
    height: 100px;
    font-size: 30px;
    line-height: 100px;
    text-align: center;
    color: #687179;
}

.login-form {
    margin-top: 25px;
    text-align: center;
    height: 320px;
}
</style>
